<template>
  <div id="wish-container">
    <div id="wish-title">Wish List</div>
    <el-row>
      <el-col :span="16">
        <div id="wish-left">
          <div v-for="item in wishes" :key="item.shopName">
            <el-row class="wish-shop-title">
              <el-col :span="2"
                ><div>
                  <el-checkbox
                    v-model="item.checked"
                    @change="handleSelectAll($event, item)"
                  ></el-checkbox></div
              ></el-col>
              <el-col :span="5"
                ><div>{{ item.shopName }}</div></el-col
              >
            </el-row>
            <el-row
              v-for="wish in item.wishes"
              :key="wish.id"
              class="wish-item"
            >
              <el-col :span="2"
                ><div><el-checkbox v-model="wish.checked"></el-checkbox></div
              ></el-col>
              <el-col :span="5"
                ><div>{{ wish.title }}</div></el-col
              >
              <el-col :span="5"
                ><div style="font-size: 10pt">{{ wish.desc }}</div></el-col
              >
              <el-col :span="3"
                ><div>{{ wish.price }}</div></el-col
              >
              <el-col :span="4"
                ><div>
                  <el-input-number
                    v-model="wish.num"
                    size="small"
                    :min="1"
                  ></el-input-number></div
              ></el-col>
              <el-col :span="5">
                <span class="el-icon-star-off wish-item-icon"></span>
                <span
                  class="el-icon-delete wish-item-icon"
                  style="margin-left: 10px"
                ></span>
              </el-col>
            </el-row>
            <br />
            <br />
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding-left: 10px">
        <div id="wish-right">
          <el-row>
            <el-col :span="24" style="margin-top: 30px">
              <div class="wish-right-desc-item">
                <span class="wish-right-desc-item-text text-left">xxxx</span
                ><span class="wish-right-desc-item-text text-right">AUD</span>
              </div>
              <div class="wish-right-desc-item">
                <span class="wish-right-desc-item-text text-left">xxxx</span
                ><span class="wish-right-desc-item-text text-right">AUD</span>
              </div>
              <div class="wish-right-desc-item" style="margin-top: 45px">
                <span class="wish-right-desc-item-text text-left">TOTAL</span
                ><span class="wish-right-desc-item-text text-right">AUD</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      priceItem: [],
      total: 0,
      wishes: [
        {
          shopName: "shop 1",
          wishes: [
            {
              id: "1234561",
              title: "goods 1-1",
              desc: "goods 1-1 description",
              price: "18.8",
              num: 1,
            },
            {
              id: "1234562",
              title: "goods 1-2",
              desc: "goods 1-2 description",
              price: "17.8",
              num: 1,
            },
          ],
        },
        {
          shopName: "shop 2",
          wishes: [
            {
              id: "1234563",
              title: "goods 2-1",
              desc: "goods 2-1 description",
              price: "19",
              num: 1,
            },
            {
              id: "1234564",
              title: "goods 2-2",
              desc: "goods 2-2 description",
              price: "28.5",
              num: 1,
            },
          ],
        },
      ],
    };
  },
  watch: {
    wishes: {
      deep: true,
      handler() {
        debugger;
        let itemList = [];
        for (let item of this.wishes) {
          let wishList = item.wishes;
          console.log(wishList);
          wishList
            .map((o) => {
              console.log(o);
              return {
                desc: o.title,
                total: parseInt(o.price) * o.num,
              };
            })
            .forEach((o) => itemList.push(o));
        }
        console.log(itemList);
        this.priceItem = itemList;
      },
    },
  },
  methods: {
    handleSelectAll(e, item) {
      item.wishes.forEach((i) => (i.checked = e));
    },
  },
  created() {
    console.log(this.wishes);
  },
};
</script>

<style>
#wish-container {
  height: 100%;
  padding-top: 2%;
  background-color: #efeae4;
  padding-left: 10%;
  padding-right: 10%;
}
#wish-right {
  width: 100%;
  background-color: white;
  border: 1px solid #cdc9c9;
  border-radius: 3px;
}
#wish-title {
  /* margin-top: 2%; */
  margin-bottom: 2%;
  margin-left: 25%;
  font-size: 2rem;
  font-weight: 300;
}
#wish-left .el-row {
  background-color: white;
}
#wish-right .el-row {
  background-color: white;
}
.wish-item {
  height: 75px;
  /* margin-top: 0.1px; */
}
#wish-left .el-row {
  border: 1px solid #cdc9c9;
  border-radius: 3px;
}
.wish-item .el-col {
  height: 100%;
  line-height: 75px;
  text-align: center;
}
.wish-shop-title {
  height: 40px;
}
.wish-shop-title .el-col {
  height: 100%;
  line-height: 40px;
  text-align: center;
}
.el-checkbox__inner {
  width: 20px !important;
  height: 20px !important;
}
.el-checkbox__inner::after {
  height: 12px !important;
  left: 7px !important;
}
.wish-item-icon {
  font-size: 20px;
}
.wish-right-desc-item {
  font-size: 20px;
  /* text-align: center; */
  /* position: relative; */
  /* margin-top: 10px; */
  /* letter-spacing:2px */
}
.wish-right-desc-item-text {
  margin-left: 20px;
}
.wish-right-price-item {
  font-size: 20px;
  /* margin-top: 10px; */
}
.wish-right-desc-price-text {
  text-align: right;
  margin-right: 20px;
}
/* .text-left {
  position: absolute;
  left: 20px;
} */
.text-right {
  float: right;
  margin-right: 20px;
}
</style>